<template>
	<gui-page :refresh="true" @reload="reload" :loadmore="true" @loadmorefun="loadData"
		:apiLoadingStatus="apiLoadingStatus" ref="guipage">
		<template v-slot:gBody>
			<gui-a-header title="人才投递"></gui-a-header>
			<view class="statistical-info gui-flex bgfff">
				<view class="item r-line">
					<view class="num f36">
						{{hData.toDay}}
					</view>
					<view class="txt mt10">
						今日投递
					</view>
				</view>
				<view class="item r-line">
					<view class="num f36">
						{{hData.monthDay}}
					</view>
					<view class="txt mt10">
						本月投递
					</view>
				</view>
				<view class="item">
					<view class="num f36">
						{{hData.allList}}
					</view>
					<view class="txt mt10">
						全部投递
					</view>
				</view>
			</view>
			<view class="zw_20"></view>
			<view class="echarts-warp bgfff">
				<view class="title f28">
					历史统计<text class="f20">（人）</text>
				</view>
				<JnChart canvasId="pie" :option="optionPie" />
			</view>
			<view class="zw_20"></view>
			<view class="bai-title gui-flex gui-space-between bgfff">
				<view class="t-txt f28 c-txt-main">
					最新投递
				</view>
				<view class="more f20" @tap="$u.to(`/pages/mine/talent-delivery-list`)">
					查看更多>>
				</view>
			</view>
			<view class="deliver-list bgfff">
				<gui-empty v-if="noData">
					<template v-slot:img>
						<view class="gui-flex gui-rows gui-justify-content-center">
							<image class="nodata-img" src="../../static/image/no_curriculum_vitae.png" mode="widthFix">
							</image>
						</view>
					</template>
					<template v-slot:text>
						<text class="gui-text-small gui-block gui-text-center gui-margin-top gui-color-gray">暂无数据</text>
						<view class="zw" style="height: 200rpx;"></view>
					</template>
				</gui-empty>
				<view class="deliver-item gui-flex gui-align-items-start" v-for="(item,index) in dataList" :key="item.id">
					<view class="photo">
						<gui-image :width="115" :src="item.userImg" :height="115" borderRadius="60rpx"></gui-image>
						<image class="sex_img" v-if="item.userSex == '0'" src="../../static/image/man.png" mode="widthFix"></image>
						<image class="sex_img" v-if="item.userSex == '1'" src="../../static/image/woman.png" mode="widthFix"></image>
					</view>
					<view class="info">
						<view class="f26 c333">
							{{item.userName}}
						</view>
						<view class="f22 stress mt10">
							投递岗位：{{item.postTitle}}
						</view>
						<view class="f22 c666 mt10">
							投递时间：{{item.createTime}}
						</view>
						<view class="sgin gui-flex">
							<view class="sgin-item">
								{{item.userAge}}岁
							</view>
							<view class="sgin-item">
								{{item.workTime}}
							</view>
							<view class="sgin-item" v-if="item.education">
								{{item.education}}
							</view>
							<view class="sgin-item stress-warp" v-if="item.workStatus">
								{{item.workStatus}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
	</gui-page>
</template>

<script setup>
	import JnChart from '@/packageA/components/jn-chart/index.vue';
	import {
		userPostInfo,
		selectPostNewInfoList
	} from '@/api/company.js';
	import {
		ref,
		reactive,
		inject,
		onMounted
	} from 'vue';
	const $u = reactive(inject('$u'))
	const hData = ref({})
	const guipage = ref(null);
	// 如果 option 是通过接口数据动态组成，建议给组件加上 lazyLoad 配置 静态的option，不用也不能加lazyLoad，否则不显示
	const optionPie = ref({})
	
	const reload = (isRelod = true) => {
		query.value.pageNum = 1;
		loadData(isRelod);
	}
	const apiLoadingStatus = ref(false)
	const query = ref({
		pageNum: 1,
		pageSize: 10
	})
	const noData = ref(false);
	const dataList = ref([])

	onMounted(() => {
		loadHeader();
		loadData();
	})
	
	// 查询
	const loadData = (isReload) => {
		let queryParam = Object.assign(query.value, {})
		selectPostNewInfoList(queryParam).then(res => {
			if (res.code == 200) {
				var resultArr = res.rows;
				let total = Math.ceil(res.total / queryParam.pageSize);
				if (queryParam.pageNum >= 2) {
					dataList.value = dataList.value.concat(resultArr);
					guipage.value.stoploadmore();
					// 假定第3页加载了全部数据，通知组件不再加载更多
					// 实际开发由接口返回值来决定
					if (queryParam.pageNum >= total) {
						guipage.value.nomore();
					}
				}
				// 第一页 有可能是第一次加载或者刷新
				else {
					dataList.value = [];
					dataList.value = resultArr;
					// 刷新
					if (isReload) {
						guipage.value.endReload();
					} else {
						guipage.value.stoploadmore();
					}
					(resultArr.length <= 0) ? noData.value = true: noData.value = false;
				}
				query.value.pageNum++;
			}
		})
	}

	const loadHeader = () => {
		userPostInfo().then(res => {
			if (res.code == 200) {
				hData.value = res.data;
				optionPie.value = {
					tooltip: {
						trigger: 'item'
					},
					legend: {
						show: false
					},
					graphic: [{
						//环形图中间添加文字
						type: "text", //通过不同top值可以设置上下显示
						left: "center",
						top: "center",
						style: {
							text: ['投递总数', res.data.allList].join('\n'), //实现两文本上下换行的效果
							textAlign: "center",
							fill: "#787E85", //文字的颜色
							fontSize: 14,
							lineHeight: 20,
						}
					}],
					series: [{
						name: '历史统计（人）',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						label: {
							show: true
						},
						labelLine: {
							show: true
						},
						data: [{
								value: res.data.newNum,
								name: '新投递'
							},
							{
								value: res.data.refuseNum,
								name: '已拒绝'
							},
							{
								value: res.data.shFollowNum,
								name: '已关注'
							}
						]
					}]
				}
			}
		})
	}
</script>

<style lang="scss">
	.statistical-info {
		width: 100%;
		height: 155rpx;

		.item {
			position: relative;
			width: 33.3%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			&.r-line::after {
				content: '';
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 1rpx;
				height: 90rpx;
				background-color: #DDDDDD;
			}

			.num {
				color: #4072FE;
			}
		}
	}

	.zw_20 {
		width: 100%;
		height: 20rpx;
	}

	.echarts-warp {
		width: 100%;
		height: 420rpx;
		position: relative;

		.title {
			position: absolute;
			top: 0;
			left: 0;
			padding: 40rpx 26rpx 0 26rpx;
		}
	}
</style>